<template>
  <fieldset>
    <legend>商品</legend>
    <h1>商品:Product</h1>
    <ul>
      <li v-for="item in productData" :key="item.id">
        <b>产品名称：{{ item.title }}</b>
        ----------
        <b>产品价格：{{ item.price }}</b>
        ----------
        <b>库存：{{ item.inventory }}</b>
        --
        <button @click="addCartFn(item)" :disabled="item.inventory == 0">
          加入购物车
        </button>
      </li>
    </ul>
  </fieldset>
</template>
<script>
//需求：
//1.请求数据，在product组件里渲染数据
//封装请求方法
//请求放到vuex的action里面
//vuex需要模块化，并且添加mutations

//2.点击产品后面的按钮，需要将产品添加到购物车
//3.相同的数据添加到购物车，需要让购物车的数量加一，产品的库存减一
//4.总价计算
import { mapActions, mapState } from "vuex"
export default {
  computed: {
    ...mapState("product", ["productData"])
  },
  methods: {
    ...mapActions("product", ["FETCH_PRODUCT"]),
    ...mapActions("cart", ["ADD_CART"]),
    addCartFn(current) {
      //current 点击按钮选中的这条数据
      console.log(current)
      //调用了cart模块中的actions中的方法（这个方法只是为了触发其mutations中的SET_CART）
      this.ADD_CART(current)
    }
  },
  mounted() {
    //发起请求
    this.FETCH_PRODUCT()
  }
}
</script>
